<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-tabs
            v-model="tabActive"
            @tab-click="handleTabClick"
          >
            <el-tab-pane
              v-for="item in tabList"
              :key="item.name"
              :label="item.label"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
          <!--搜索-->
          <SearchForm
            ref="SearchForm"
            style="margin-top: 10px"
            :search-form-arr="searchFormArr"
            @searchParma="searchParma"
          />
        </div>
      </div>
      <!--数据信息-->
      <div
        v-if="tabActive === 'my'"
        class="panel-container no-margin"
      >
        <el-table
          ref="table1"
          key="table1"
          v-loading="dataListLoading"
          stripe
          :data="dataList"
          :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            header-align="center"
            label="公司名称"
            prop="com_name"
          >
            <template slot-scope="scope">
              <!-- 跳转到publish 带khid参数 -->
              <!-- <router-link
                :to="{ name: 'CluePublish', query: { khid: scope.row.khid } }"
              > -->
              <span class="text-link">
                {{ scope.row.com_name }}
              </span>
              <!-- </router-link> -->
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="客户意向"
            prop="new_mark_level"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.new_mark_level }}类</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="批注内容"
            prop="new_mark_desc"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            header-align="center"
            label="批注人"
            prop="man_name"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="部门"
            prop="dept_name"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            header-align="center"
            label="批注时间"
            prop="created_time"
          />
          <el-table-column
            align="center"
            header-align="center"
            label="批注时限"
            prop="follow_content"
          />
        </el-table>
        <el-pagination
          small
          background
          :current-page="pageNumber"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pageTotal"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
        />
      </div>
      <!--数据信息-->
      <div
        v-else
        class="panel-container no-margin"
      >
        <el-table
          ref="table2"
          key="table2"
          v-loading="dataListLoading"
          row-key="id"
          stripe
          show-summary
          :data="dataList"
          :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
          :load="load"
          :tree-props="{ children: 'children', hasChildren: 'is_depart' }"
          style="width: 100%"
          lazy
        >
          <el-table-column
            label="部门/员工"
            prop="name"
          >
            <template slot-scope="scope">
              <!-- 跳转到publish 带khid参数 -->
              <!-- <router-link
                :to="{ name: 'CluePublish', query: { khid: scope.row.khid } }"
              > -->
              <span class="text-link">
                {{ scope.row.name }}
              </span>
              <!-- </router-link> -->
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            label="批注数"
            prop="count"
          >
            <template slot-scope="scope">
              <span class="text-link">{{ scope.row.count }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { apiCustomerMarkList, apiCustomerDeptCount } from '@/api/clue'
import { CustomerIntentionList } from '@/utils/constant'

export default {
  name: 'ClueComment',
  components: {},
  data() {
    return {
      tabActive: 'my',
      tabList: [
        { name: 'my', label: '本人批注客户清单' },
        { name: 'all', label: '部门批注客户统计' }
      ],
      dataList: [],
      pageNumber: 1,
      pageSize: 10,
      pageTotal: 0,
      dataListLoading: false,
      searchFormArr: [
        {
          fieldName: '线索意向:',
          type: 'select',
          field: 'new_mark_level',
          option: CustomerIntentionList.map((item) => {
            return { value: item.id, label: item.name }
          })
        },
        {
          fieldName: '批注时间:',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择批注时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd'
        }
      ],
      searchParams: {
        new_mark_level: '',
        mark_start_time: '',
        mark_end_time: ''
      },
      currentUserId: localStorage.getItem('feijiu_user_uid') || '',
      userNumberId: '',
      currentItem: null,
      deptLevel: '',
      deptId: ''
    }
  },
  activated() {
    this.$refs.table1.doLayout()
    this.$refs.table2.doLayout()
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    init() {
      if (this.tabActive === 'my') {
        this.userNumberId = this.currentUserId
      }
      this.getSelectList()
      this.getDataList()
    },
    getSelectList() {},
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      if (this.tabActive === 'my') {
        let info = {
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          user_number_id: this.userNumberId
        }
        info = Object.assign(info, this.searchParams)
        apiCustomerMarkList(info)
          .then((res) => {
            const { data, total } = res
            this.dataList = data
            this.pageTotal = total
            this.dataListLoading = false
            this.$refs.table1.doLayout()
          })
          .catch((e) => {
            this.dataList = []
            this.pageTotal = 0
            this.dataListLoading = false
          })
      } else {
        apiCustomerDeptCount({
          new_mark_level: this.searchParams.new_mark_level,
          start_time: this.searchParams.mark_start_time,
          end_time: this.searchParams.mark_end_time
        })
          .then((res) => {
            const { data } = res
            data.forEach((item) => {
              item.children = []
              item.level = 0
            })
            this.dataList = []
            setTimeout(() => {
              this.dataList = data
            })
            this.dataListLoading = false
            this.$refs.table2.doLayout()
          })
          .catch((e) => {
            this.dataList = []
            this.dataListLoading = false
          })
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getDataList()
    },
    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (e[item.field]) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      if (e.time) {
        this.searchParams.mark_start_time = e.time[0]
        this.searchParams.mark_end_time = e.time[1]
      } else {
        this.searchParams.mark_start_time = ''
        this.searchParams.mark_end_time = ''
      }
      this.pageNumber = 1
      this.getDataList()
    },
    // tab切换
    handleTabClick() {
      if (this.tabActive === 'my') {
        this.userNumberId = this.currentUserId
      } else {
        this.userNumberId = ''
      }
      this.pageNumber = 1
      this.getDataList()
    },
    // 表格懒加载
    load(tree, treeNode, resolve) {
      console.log(tree, 111)
      const { level, id } = tree
      this.deptLevel = level + 1
      this.deptId = id
      this.getDeptCount().then((data) => {
        resolve(data)
      })
    },
    // 获取部门统计
    getDeptCount() {
      return new Promise((resolve) => {
        apiCustomerDeptCount({
          level: this.deptLevel,
          dept_id: this.deptId,
          new_mark_level: this.searchParams.new_mark_level,
          start_time: this.searchParams.mark_start_time,
          end_time: this.searchParams.mark_end_time
        }).then((res) => {
          const { data } = res
          data.forEach((item) => {
            item.children = []
            item.level = this.deptLevel || 1
          })
          resolve(data)
        })
      })
    }
  }
}
</script>
